<script setup lang="ts">
import { watch } from "vue";
defineOptions({ name: "HelloWorld" });
interface IProps {
  count?: number;
}
const emit = defineEmits(["update:count"]);
const props = withDefaults(defineProps<IProps>(), {
  count: 0
})
const add = () => {
  emit("update:count", props.count + 1);
}
defineExpose({
  add
})

watch(()=>props.count,(newCount: number)=>{
console.log("新count是"+newCount)
})
</script>

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="add">加一</button>
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
